<template>
	<view class="custom-other">
		<view class="li u-flex-col u-col-center" v-for="item in list" :key="item.name" @click="otherChange(item.path)">
			<image :src="item.icon" mode="aspectFill" class="image"></image>
			<view class="li-text">{{item.name}}</view>
		</view>
	</view>
</template>

<script setup>
	import { navigateTo } from '@/utils/router.js'

	const list = [{
			name: "领券中心",
			icon: "https://qn.mtj.cdydsy.com/user_client/new-version/lqzx.png",
			path: "/subPackages/coupon/index"
		},
		{
			name: "反馈建议",
			icon: "https://qn.mtj.cdydsy.com/user_client/new-version/fkjy.png",
			path:"/subPackages/feedback/list?type=20"
		},
		{
			name: "问题投诉",
			icon: "https://qn.mtj.cdydsy.com/user_client/new-version/wtts.png",
			path:"/subPackages/feedback/list?type=10"
		},
		{
			name: "积分商城",
			icon: "https://qn.mtj.cdydsy.com/user_client/new-version/integral-icon.png",
			path: "/subPackages/integral-mall/index"
		}
	]

	const otherChange = (path) => {
		if (!path) return;
		navigateTo(path)
	}
</script>

<style lang="scss" scoped>
	.custom-other {
		width: 694rpx;
		background: $base-color-white;
		border-radius: 24rpx;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		margin: 20rpx auto 0;
		padding: 40rpx 10rpx;

		.li {
			.image {
				width: 64rpx;
				height: 64rpx;
				display: block;
			}

			.li-text {
				padding-top: 15rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: $font-size-24;
				color: $base-light-color;
			}
		}
	}
</style>